<template>
	<view class="page">
		<CustomNav :isBack="true" color="#fff" :topBgColor="topBgColor" title="肃州种子"></CustomNav>
		<view :style="'margin-top:'+mt" class="content">
			<view class="top-img">
				<swiper autoplay="true" interval="8000" style="height: 500rpx;">
					<swiper-item v-for="(item, index) in info.swiperImages" :key="index">
						<image :src="item"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="info-block block">
				<view class="name">{{info.title||''}}</view>
				<view class="describe">{{info.account}}</view>
			</view>
			<view class="white-block block" v-if="info.phone">
				<view class="info-item">
					<image class="iconfont1" src="@/static/images/call-phone.png"></image>
					<view class="info-value">{{info.phone||'暂无联系方式'}}</view>
					<view v-if="info.phone" @click="call(info.phone)" class="operate-btn">
						<image class="iconfont" src="@/static/images/call.png"></image>拨打
					</view>
				</view>
				<view class="info-item">
					<image class="iconfont1" src="@/static/images/address.png"></image>
					<view class="info-value">{{info.address||'暂无位置'}}</view>
					<view v-if="info.address" @click="openMap(info.latitude,info.longitude,info.address)"
						class="operate-btn">
						<image class="iconfont" src="@/static/images/navigate.png"></image>导航
					</view>
				</view>
			</view>
			<view class="white-block block">
				<view class="block-title FZHZGBJ">简介</view>
				<view class="content">
					<template v-if="info.introduction&&info.introduction.length>0">
						<mp-html :content="info.introduction"></mp-html>
					</template>
					<view v-else class="empty">暂无简介</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		specialDetail
	} from '@/api/article.js';
	export default {
		components: {},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				info: {
					title: '',
					swiperList: [],
					account: '',
					phone: '',
					latitude: 39.425904,
					longitude: 98.780061,
					address: '',
				}
			}
		},
		watch: {

		},
		methods: {
			getDetail(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				specialDetail({
					id
				}).then(res => {
					this.info = res;
				})
			}
		},
		onLoad(opt) {
			if (!opt.id) {
				this.showToast('参数错误', () => {
					uni.navigateBack();
				})
				return;
			} else {
				this.getDetail(opt.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		overflow: hidden;
		height: 100%;
		background-image: linear-gradient(to bottom, #68C759, #F8F8F8 400px, #F8F8F8 400px, #F8F8F8);
		background-repeat: no-repeat;

		.content {
			width: $content-width;
			margin: 0 auto;

			.top-img {
				width: 100%;
				height: 100%;


				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}

			.block {
				background-color: #fff;
				margin-bottom: 30rpx;
				padding: 30rpx;
				border-radius: 30rpx;
			}

			.info-block {
				margin-top: 30rpx;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.describe {
					font-size: 30rpx;
					line-height: 55rpx;
				}
			}

			.white-block {
				.info-item {
					border-bottom: 1px solid #efefef;
					height: 140rpx;
					display: flex;
					align-items: center;

					.info-value {
						width: calc(100% - 230rpx);
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.iconfont1 {
						width: 35rpx;
						height: 35rpx;
						margin-right: 20rpx;
					}

					.iconfont {
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}

					.operate-btn {
						width: 170rpx;
						border-radius: 20px;
						border: 1px solid $theme-color;
						height: 65rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: $theme-color;
					}
				}

				.info-item:last-child {
					border-bottom: none;
				}

				.block-title {
					margin-bottom: 20rpx;
				}

				.content {
					line-height: 1.6;
					text-align: justify;
				}
			}
		}
	}
</style>